<!-- 搜索框区域 -->
<template>
  <div class="formBox" style="padding-top: 20px">
    <div class="app-left">
      <t-select
        v-model="formData.userAppId"
        :keys="keys"
        :options="appList"
        placeholder="请选择"
        autoWidth
        borderless
        @change="handleChangeAppId"
      />
    </div>
    <div class="app-right">
      流程名：
      <t-input
        v-model="searchData.name"
        class="form-item-content"
        type="search"
        placeholder="请输入"
        clearable
      />
      业务号：
      <t-input
        v-model="searchData.businessKey"
        class="form-item-content"
        type="search"
        placeholder="请输入"
        clearable
      />
      <button
        class="bt wt-60"
        style="margin-right: 0px"
        @click="handleSearch()"
      >
        搜索
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getApplicationList } from '@/api/application'
// 获取父组件值、方法
const props = defineProps({
  // 搜索对象
  searchData: {
    type: Object,
    default: () => ({})
  }
})
const keys = ref({
  value: 'appId',
  label: 'appName'
})
// 触发父组件的方法
const emit: Function = defineEmits([
  'handleSearch',
  'handleReset',
  'handleChangeAppId'
])
const formData = ref({
  name: '',
  userAppId: ''
})
// 重置表单
const handleReset = () => {
  formData.value = {
    name: '',
    userAppId: ''
  }
  emit('handleReset')
}
// 搜索表单
const handleSearch = () => {
  emit('handleSearch')
}
// 表单数据
const appList = ref([])
const fetchApp = () => {
  const params = {
    id: 'USER_APP_LIST',
    palyload: {}
  }
  getApplicationList(params).then((res) => {
    appList.value = res.data.result.data
    if (appList.value && appList.value.length > 0) {
      formData.value.userAppId = appList.value[0].appId
      handleChangeAppId()
    }
  })
}
// 切换APPID
const handleChangeAppId = () => {
  emit('handleChangeAppId', formData.value.userAppId)
}
onMounted(() => {
  fetchApp()
})
</script>
<style lang="less" scoped src="../index.less"></style>
